<template>
  <div class="homeIndex">
    <NavBar />
    <div class="container">
      <Guide v-model="showGuide" />
      <div class="index-i">
        <div class="carousel item w73" v-loading="!movePicture.load">
          <div class="layui-carousel" id="carous">
            <div carousel-item>
              <div v-for="(item,index) in movePicture.data" :key="index">
                <a :href="item.hyperlink" target="_blank"><img :src="item.imgUrl" :title="item.title"></a>
              </div>
            </div>
          </div>
        </div>
        <!-- 精选计划 -->
        <div class="sel-plan w23 fr item">
          <div class="sel-p-h">
            <b class="ftz16">精选计划</b>
          </div>
          <div class="sel-p-c">
            <ul>
              <li v-for="(item,index) in hotPlan.data" :key="index">
                <router-link :to="`/plan/${item.planId}`" class="ftz16 title">{{item.name}}</router-link>
                <span class="lab els">{{item.abilityCircle}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="index-i">
        <!-- 看直播 -->
        <div class="watch w73 item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">看直播</b>
            <span class="c80">百位高手齐聚堂，牛股信息尽入网</span>
            <span class="fr">
              <a href="javascript:void(0)" class="c80" @click="tjLivePage" v-if="tjLive.load">
                <span class="icon icon-change"></span>换一换
              </a>
              <router-link to="/liveIndex" class="c80 ml26">更多</router-link>
            </span>
          </div>
          <div class="watch-c" v-loading="!tjLive.load">
            <div>
              <div class="watch-c-i" v-for="(item,index) in tjLive.data" :key="index">
                <div class="photo photo-level">
                  <router-link :to="`/dashboard/live/${item.userId}`"><img :src="item.avatar"></router-link>
                  <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                </div>
                <div class="live-i fr">
                  <router-link :to="`/liveRoom?roomId=${item.roomId}`" class="ftz16 title ellipsis" style="width: 190px;">{{item.roomName}}</router-link>
                  <span class="fr live-st">
                    <span class="icon"></span>
                    正在直播
                  </span>
                  <div class="tip">
                    <span class="lab">{{item.tags}}</span>
                    <span class="fr">
                      <i>{{item.visitNum}}</i>人气</span>
                  </div>
                </div>
                <router-link :to="`/liveRoom?roomId=${item.roomId}`" class="watch-t ftz16">{{item.topicName}}</router-link>
                <div class="watch-c-con">
                  <span class="time">{{item.createTime | parseTime('{h}:{i}')}}</span>
                  <router-link :to="`/liveRoom?roomId=${item.roomId}`" class="fr ">{{formatHtml(item.contentText)}}</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 排行榜 -->
        <div class="rank w23 fr item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">排行榜</b>
            <span class="fr rank-g">
              <a href="javascript:;" :class="{on:!rank.type}" @click="getRank(0,1)">人气榜</a>
              <a href="javascript:;" :class="{on:!!rank.type}" @click="getRank(1,1)">活跃榜</a>
            </span>
          </div>
          <div class="rank-c" v-loading="!rank.load">
            <ul>
              <li v-for="(item,index) in rank.data" :key="index">
                <span class="rank-n">
                  <i :class="{'lab': index>2,'icon': index<3, 'icon-num':index<3, 'icon-num-1': index===0, 'icon-num-2': index===1, 'icon-num-3': index===2}">{{index>2?index + 1:''}}</i>
                </span>
                <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                  <img :src="item.avatar">
                  <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                </router-link>
                <router-link :to="`/dashboard/live/${item.userId}`" style="width: 95px;" class="ftz16 ellipsis">{{item.userName}}</router-link>
                <span class="icon icon-hot"></span>
                <span class="c80">{{!rank.type ? item.visitNum : item.activeNum}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="index-i">
        <!-- 读观点 -->
        <div class="read w73 item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">读观点</b>
            <span class="c80">百位高手齐聚堂，牛股信息尽入网</span>
            <span class="fr">
              <a href="javascript:void(0)" class="c80" @click="tjPointPage" v-if="tjPoint.load">
                <span class="icon icon-change"></span>换一换
              </a>
              <router-link to="/viewpoint" class="c80 ml26">更多</router-link>
            </span>
          </div>
          <div class="read-c" v-loading="!tjPoint.load">
            <div>
              <div class="read-c-i" v-for="(item,index) in tjPoint.data" :key="index">
                <div class="image">
                  <router-link :to="`/articleDetails/${item.viewPointId}`"><img :src="item.imgUrl"></router-link>
                  <span class="lab">{{item.classifyName}}</span>
                </div>
                <div class="info fr">
                  <router-link :to="`/articleDetails/${item.viewPointId}`" class="title ftz16">{{item.title}}</router-link>
                  <router-link :to="`/articleDetails/${item.viewPointId}`" class="txt c80">{{item.summary}}</router-link>
                  <div class="tips">
                    <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                      <img :src="item.avatar">
                      <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                    </router-link>
                    <span class="author-name">{{item.author}}</span>
                    <span class="fr time margin-top-10">{{item.createTime | parseTime('{y}-{m}-{d}')}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门观点 -->
        <div class="hot-point w23 fr item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">热门观点</b>
          </div>
          <div class="hot-point-c" v-loading="!hotPoint.load">
            <ul>
              <li v-for="(item,index) in hotPoint.data" :key="index">
                <span class="lab">{{index+1}}</span>
                <router-link class="hot-point-p fr" :to="`/articleDetails/${item.viewPointId}`">[{{item.classifyName}}]{{item.title}}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="index-i">
        <!-- 找答案 -->
        <div class="find w73 item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">找答案</b>
            <span class="c80">百位高手齐聚堂，牛股信息尽入网</span>
            <span class="fr">
              <a href="javascript:void(0)" class="c80" @click="tjAnswerPage" v-if="tjAnswer.load">
                <span class="icon icon-change"></span>
                换一换
              </a>
              <router-link to="/qa" class="c80 ml26">更多</router-link>
            </span>
          </div>
          <div class="find-c" v-loading="!tjAnswer.load">
            <div>
              <div class="find-c-i" v-for="(item,index) in tjAnswer.data" :key="index">
                <div class="photo">
                  <router-link :to="`/dashboard/qa/${item.sysUserFieldTagVO.userId}`" class="photo-level">
                    <img :src="item.sysUserFieldTagVO.avatar">
                    <span :class="[`level`,`level_${item.certification.authType}`,`mini`]"></span>
                  </router-link>
                </div>
                <span class="name ftz16">{{item.sysUserFieldTagVO.authName}}</span>
                <span class="tip">
                  擅长：{{item.sysUserFieldTagVO.field}}
                  <span class="line"></span>
                  解答：{{item.sysUserFieldTagVO.answerCount ? item.sysUserFieldTagVO.answerCount : 0}}个
                </span>
                <div class="btn">
                  <a href="javascript:;" @click.stop.prevent="showQuestionBox(item)" class="req" quiz v-if="!item.sysUserFieldTagVO.answerPay">免费提问</a>
                  <a href="javascript:;" @click.stop.prevent="showQuestionBox(item)" class="req" quiz v-else>
                    <span class="icon-coin"></span>{{parseFloat(item.sysUserFieldTagVO.answerPay)}}提问</a>
                </div>
                <div class="lis">
                  <div>
                    {{item.certification.descs}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 精彩问答 -->
        <div class="answ w23 fr item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">精彩问答</b>
            <router-link to="/qa" class="fr quiz">我要提问</router-link>
          </div>
          <div class="answ-c" v-loading="!QA.load">
            <ul>
              <li v-for="(item,index) in QA.data" :key="index">
                <router-link :to="`/qa/${item.question.questionId}`" class="title">{{item.question.questionContent}}</router-link>
                <span class="tip c80">
                  <router-link :to="`/dashboard/qa/${item.questionedUser.userId}`">{{item.questionedUser.authName}}</router-link>回答
                  <span class="fr">{{item.question.countStar}}人赞</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="index-i">
        <!-- 追计划 -->
        <div class="chase-plan w73 item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">追计划</b>
            <span class="c80">百位高手齐聚堂，牛股信息尽入网</span>
            <span class="fr">
              <a href="javascript:void(0)" class="c80" @click="tjPlanPage" v-if="tjPlan.load">
                <span class="icon icon-change"></span>
                换一换
              </a>
              <router-link to="/plan" class="c80 ml26">更多</router-link>
            </span>
          </div>
          <div class="chase-plan-c" v-loading="!tjPlan.load">
            <div>
              <div class="chase-plan-i" v-for="(item,index) in tjPlan.data" :key="index">
                <router-link :to="`/plan/${item.planId}`" class="ftz16 title">{{item.name}}</router-link>
                <span class="fr ftz16 price">
                  <span class="icon-coin"></span>{{parseFloat(item.price)}}</span>
                <router-link :to="`/plan/${item.planId}`" class="txt">{{item.intro}}</router-link>
                <div class="tips">
                  <router-link :to="`/dashboard/live/${item.userId}`" class="photo photo-level">
                    <img :src="item.avatar">
                    <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                  </router-link>
                  <span class="ellipsis" style="width: 120px;">{{item.author}}</span>
                  <router-link :to="`/plan/${item.planId}`" class="take taked fr" v-if="item.paid === 1 || item.userId === userId">查看详情</router-link>
                  <router-link :to="`/plan/${item.planId}`" class="take fr" v-else>立即订阅</router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 牛人榜 -->
        <div class="gen-rank w23 fr item">
          <div class="item-h">
            <span class="line"></span>
            <b class="ftz16">牛人榜</b>
            <router-link to="/superior" class="fr">全部</router-link>
          </div>
          <div class="gen-rank-c" v-loading="!NIUREN.load">
            <ul>
              <li v-for="(item, index) in NIUREN.data" :key="index">
                <div class="photo">
                  <router-link :to="'/dashboard/qa/' + item.userId" class="images photo-level">
                    <img :src="item.imageUrl">
                    <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
                  </router-link>
                  <button :class="{'black': item.followed=='1'}" @click="follow(index, item)">
                    {{item.followed=='1'?'已关注': '+关注'}}
                  </button>
                </div>
                <div class="info fr">
                  <router-link :to="'/dashboard/qa/' + item.userId" class="name ftz16 els">{{item.accoutName}}</router-link>
                  <p>{{item.accoutDesc}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 入驻机构 -->
      <div class="index-i item organ">
        <div class="item-h">
          <span class="line"></span>
          <b class="ftz16">入驻机构</b>
        </div>
        <div class="organ-c" v-loading="!JG.load">
          <ul>
            <li v-for="(item,index) in JG.data" :key="index">
              <router-link :to="`/dashboard/live/${item.userId}`">
                <img :src="item.orgLogo" :title="item.orgName">
                <div>{{item.orgName}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height: 0;overflow:hidden;">
      <div id="recommended">
      <div class="recommended-content">
        <div v-for="(item, index) in subscribeList" :key="index" class="cur-flex">
          <p class="title">{{index}}</p>
          <ul class="cur-flex cur-flex-wrap flex-1">
            <li @click="checkSubscribe(option.roomId)" class="recommended-item cur-flex cur-direction-column cur-justify-center" v-for="(option, key) in item" :key="key">
              <div>
                <img class="avatar" :src="option.avatar" alt="">
                <img v-if="curSubscribe.indexOf(option.roomId)>-1" class="check-icon" src="../../assets/check_true.png" alt="">
                <img v-if="curSubscribe.indexOf(option.roomId)===-1" class="check-icon" src="../../assets/check_false.png" alt="">
              </div>
              <p class="name">{{option.userName}}</p>
            </li>
          </ul>
        </div>
      </div>

      <div class="bottom layui-layer-btn cur-flex cur-justify-between cur-align-center">
        <span v-if="curSubscribe.length !== recommendedAllLen" @click="changeAll(true)" class="check-all">全选</span>
        <span v-if="curSubscribe.length === recommendedAllLen" @click="changeAll(false)" class="check-all">取消全选</span>
        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" @click="saveSubscribe()">确定</button>
      </div>
    </div>
    </div>

    <transition name="fade">
      <QuestionBox v-show="questionBoxFlag" @closeFn="closeQuestionBox" @submitFn="submitQuestion" :masterInfo="targetMasterInfo" />
    </transition>
    <Footer />
  </div>
</template>
<script>
import NavBar from '@/components/nav-bar'
import Footer from '@/components/footer'
import Guide from '@/components/guide'
import QuestionBox from '@/components/questionAnswer/question-box'
import QuestionItem from '@/components/questionAnswer/question-item'
import Agreement from '@/components/agreement/agreement'
import * as api from '@/service/api'
import '../../style/res/home.scss'
export default {
  components: {
    NavBar,
    Footer,
    Guide,
    QuestionBox,
    QuestionItem,
    Agreement
  },
  data () {
    return {
      showGuide: true,
      showAgreementFlag: false,
      questionBoxFlag: false,
      // 选中提问的大咖
      targetMasterInfo: {
        id: '',
        name: '',
        avatar: '',
        comment: '',
        field: '',
        answerCount: '',
        answerPay: ''
      },
      recommendedAllLen: 0,
      subscribeList: null,
      curSubscribe: [],
      layerLoad: null,
      movePicture: {
        load: false,
        data: []
      },
      rank: {
        load: false,
        type: 0,
        page: {
          pageNum: 1,
          pageSize: 5,
          pages: 1
        },
        data: []
      },
      tjPoint: {
        load: false,
        page: {
          pageNum: 1,
          pageSize: 4,
          pages: 1
        },
        data: []
      },
      hotPlan: {
        load: false,
        data: []
      },
      tjPlan: {
        load: false,
        page: {
          pageNum: 1,
          pageSize: 6,
          pages: 1
        },
        data: []
      },
      tjAnswer: {
        load: false,
        page: {
          pageNum: 1,
          pageSize: 4,
          pages: 1
        },
        data: []
      },
      tjLive: {
        load: false,
        page: {
          pageNum: 1,
          pageSize: 4,
          pages: 1
        },
        data: []
      },
      hotPoint: {
        load: false,
        data: []
      },
      JG: {
        load: false,
        data: []
      },
      NIUREN: {
        load: false,
        data: []
      },
      QA: {
        load: false,
        data: []
      }
    }
  },
  created () {
    if (window.layer) {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    }
  },
  mounted () {
    this.getMovePicture()
    this.getRank(0, 1)
    this.gettjPoint()
    this.gethotPoint()
    this.gettjAnswer()
    this.gettjLive()
    this.getJG()
    this.getQA()
    this.getNIUREN()
    this.gettjPlan()
    this.gethotPlan()
    this.$nextTick(() => {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
      if (this.isFirstLogin) {
        this.showRecommended()
      }
    })
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    isFirstLogin () {
      return this.$store.state.me.isFirstLogin
    }
  },
  methods: {
    // 轮播图
    async getMovePicture () {
      this.movePicture.load = false
      let res = await api.getMovePicture({
        columnType: 'index'
      })
      this.movePicture.data = res.data
      this.movePicture.load = true
      setTimeout(() => {
        window.layui.use('carousel', function () {
          var carousel = window.layui.carousel
          carousel.render({
            elem: '#carous',
            width: '100%',
            height: '280px'
          })
        })
      }, 500)
    },
    // 精选计划
    async gethotPlan () {
      this.hotPlan.load = false
      let res = await api.gethotPlan({
        pageSize: 3
      })
      this.hotPlan.data = res.data.list
      this.hotPlan.load = true
    },
    // 精彩问答
    async getQA () {
      this.NIUREN.load = false
      let res = await api.getQuestionAnswerList({
        pageNum: 1,
        pageSize: 4
      })
      this.QA.data = res.data.list
      this.QA.load = true
    },
    // 牛人榜
    async getNIUREN () {
      this.NIUREN.load = false
      let res = await api.getBestExpertList({
        pageNum: 1,
        pageSize: 3
      })
      this.NIUREN.data = res.data.data
      this.NIUREN.load = true
    },
    // 关注
    async follow (itemIndex, item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再关注！')
        return false
      }
      let flag = item.followed
      await api.modifyUserFocus({
        focusUserId: item.userId,
        focusStatus: flag
      })
      item.followed = flag ? 0 : 1
    },
    // 入驻机构
    async getJG () {
      this.JG.load = false
      let res = await api.getCertOrgsList({
        pageNum: 1,
        pageSize: 6
      })
      this.JG.data = res.data.list
      this.JG.load = true
    },
    // 热门观点
    async gethotPoint () {
      this.hotPoint.load = false
      let res = await api.gethotPoint({})
      this.hotPoint.data = res.data.data
      this.hotPoint.load = true
    },
    // 排行
    async getRank (type, page) {
      this.rank.load = false
      this.rank.type = type
      this.rank.page.pageNum = page
      let res = await api.getZBRank({
        ...this.rank.page,
        searchType: type // 0: 人气榜 1:活跃榜
      })
      this.rank.data = res.data.list
      this.rank.page.pages = res.data.pages
      this.rank.load = true
    },
    // 推荐
    async getSubscribe () {
      let res = await api.getSubscribe()
      this.subscribeList = res.data
      let curKey = Object.keys(this.subscribeList)

      curKey.map(item => {
        this.recommendedAllLen += this.subscribeList[item].length
      })
    },
    changeAll (type) {
      if (type) {
        let curKey = Object.keys(this.subscribeList)
        this.curSubscribe = []
        curKey.map(item => {
          let curItem = this.subscribeList[item]
          curItem.map(option => {
            this.curSubscribe.push(option.roomId)
          })
        })
      } else {
        this.curSubscribe = []
      }
    },
    showRecommended () {
      this.getSubscribe()
      if (window.layer) {
        window.layer.open({
          title: '推荐订阅',
          area: ['570px', '670px'],
          // btn: ['确定', '取消'],
          skin: 'recommended',
          type: 1,
          shadeClose: true, // 点击其他地方是否关闭页面
          // btnAlign: 'c',
          content: $('#recommended')
        })
      }
    },
    async saveSubscribe () {
      try {
        await api.saveSubscribe({
          roomIds: this.curSubscribe.join(',')
        })
        window.layer.closeAll()
      } catch (e) {
        window.layer.closeAll()
      }
    },
    checkSubscribe (roomId) {
      let tag = this.curSubscribe.indexOf(roomId)
      if (tag > -1) {
        this.curSubscribe.splice(tag, 1)
      } else {
        this.curSubscribe.push(roomId)
      }
    },
    rankPage (n, status) {
      if (status) {
        return false
      }
      if (n) {
        this.rank.page.pageNum++
      } else {
        this.rank.page.pageNum--
      }
      this.getRank(this.rank.type, this.rank.page.pageNum)
    },
    // 看观点
    async gettjPoint () {
      this.tjPoint.load = false
      let res = await api.gettjPoint({
        ...this.tjPoint.page
      })
      this.tjPoint.data = res.data.list
      this.tjPoint.page.pages = res.data.pages
      this.tjPoint.load = true
    },
    tjPointPage () {
      if (!this.tjPoint.load) {
        return false
      }
      if (this.tjPoint.page.pageNum < this.tjPoint.page.pages) {
        this.tjPoint.page.pageNum++
      } else {
        this.tjPoint.page.pageNum = 1
      }
      this.gettjPoint()
    },
    // 追计划
    async gettjPlan () {
      this.tjPlan.load = false
      let res = await api.getLastPlanList({
        ...this.tjPlan.page
      })
      this.tjPlan.data = res.data.data.list
      this.tjPlan.page.pages = res.data.data.pages
      this.tjPlan.load = true
    },
    tjPlanPage () {
      if (!this.tjPlan.load) {
        return false
      }
      if (this.tjPlan.page.pageNum < this.tjPlan.page.pages) {
        this.tjPlan.page.pageNum++
      } else {
        this.tjPlan.page.pageNum = 1
      }
      this.gettjPlan()
    },
    // 找答案
    async gettjAnswer () {
      this.tjAnswer.load = false
      let res = await api.getRecommendMaster({
        ...this.tjAnswer.page
      })
      this.tjAnswer.data = res.data.list
      this.tjAnswer.page.pages = res.data.pages
      this.tjAnswer.load = true
    },
    tjAnswerPage () {
      if (!this.tjAnswer.load) {
        return false
      }
      if (this.tjAnswer.page.pageNum < this.tjAnswer.page.pages) {
        this.tjAnswer.page.pageNum++
      } else {
        this.tjAnswer.page.pageNum = 1
      }
      this.gettjAnswer()
    },
    // 推荐直播
    async gettjLive () {
      this.tjLive.load = false
      let res = await api.getZBwatch({
        ...this.tjLive.page
      })
      this.tjLive.data = res.data.list
      this.tjLive.page.pages = res.data.pages
      this.tjLive.load = true
    },
    tjLivePage () {
      if (!this.tjLive.load) {
        return false
      }
      if (this.tjLive.page.pageNum < this.tjLive.page.pages) {
        this.tjLive.page.pageNum++
      } else {
        this.tjLive.page.pageNum = 1
      }
      this.gettjLive()
    },
    formatHtml (n) {
      return n && n.replace(/<\/?.+?>/gm, '').replace(/&nbsp;/g, '') || ''
    },
    // 显示提问弹窗
    showQuestionBox (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再提问！')
        return false
      }
      if (this.userId === item.sysUserFieldTagVO.userId) {
        window.layui.layer.msg('不能向自己提问！')
        return false
      }
      this.questionBoxFlag = true
      let answerPay = item.sysUserFieldTagVO.answerPay
      if (!answerPay) {
        answerPay = 0
      }
      this.targetMasterInfo = {
        id: item.sysUserFieldTagVO.userId,
        name: item.sysUserFieldTagVO.authName,
        avatar: item.sysUserFieldTagVO.avatar,
        comment: item.sysUserFieldTagVO.comment,
        field: item.sysUserFieldTagVO.field,
        fieldId: item.sysUserFieldTagVO.fieldId,
        answerCount: item.sysUserFieldTagVO.answerCount | 0,
        answerPay: answerPay
      }
    },
    // 关闭提问弹窗
    closeQuestionBox () {
      this.questionBoxFlag = false
    },
    // 提交问题
    submitQuestion () {
      this.questionBoxFlag = false
    }
  }
}
</script>
<style lang="scss" scoped>
.author-name {
  display: inline-block;
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.homeIndex #recommended {
  .title {
    font-size: 18px;
    text-align: center;
    width: 80px;
    color: #888;
    margin-top: 42px;
    // margin-right: 30px;
  }
  .check-icon {
    position: absolute;
    bottom: 20px;
    right: -6px;
    z-index: 9;
  }
  .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #ccc;
  }
  .name {
    text-align: center;
  }
  .recommended-item {
    margin: 16px;
    position: relative;
    cursor: pointer;
  }
  .bottom {
    padding: 20px 30px;
    border-top: 1px solid #c2c2c2;
  }
  .bottom button {
    width: 100px;
    height: 44px;
    outline: none;
    font-size: 16px;
    color: #f04e2d;
    border-color: #f04e2d;
    cursor: pointer;
  }
  .recommended-content {
    height: 476px;
    overflow: auto;
    padding: 30px;
  }
  .check-all {
    font-size: 16px;
    color: #888;
  }
}
.homeIndex .layui-carousel > [carousel-item] {
  border-radius: 6px;
}
</style>
